import type React from "react";
import { cn } from "@/common/cn";

export const BTN_STATUS = {
  neutral: "btn-neutral",
  primary: "btn-primary",
  secondary: "btn-secondary",
  accent: "btn-accent",
  info: "btn-info",
  success: "btn-success",
  warning: "btn-warning",
  error: "btn-error",
};

export type ButtonStatus = keyof typeof BTN_STATUS;

export const BTN_VARIANTS = {
  outline: "btn-outline",
  dash: "btn-dash",
  ghost: "btn-ghost",
  link: "btn-link",
  soft: "btn-soft",
};

export type ButtonVariant = keyof typeof BTN_VARIANTS;

export const BTN_SIZES = {
  xs: "btn-xs",
  sm: "btn-sm",
  md: "btn-md",
  lg: "btn-lg",
  xl: "btn-xl",
};

export const BTN_SHAPES = {
  circle: "btn-circle",
  square: "btn-square",
};

export type ButtonShape = keyof typeof BTN_SHAPES;

type ButtonProps = Omit<
  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
  "size"
> & {
  status?: ButtonStatus | undefined;
  shape?: ButtonShape | undefined;
  variant?: ButtonVariant | undefined;
  size?: Size | undefined;
  block?: boolean;
  wide?: boolean;
  active?: boolean;
};

/**
 * 基本事件示例
 */
export default function Button({
  shape,
  variant,
  size,
  className,
  status,
  active,
  block,
  wide,
  disabled,
  ...p
}: ButtonProps) {
  return (
    <button
      className={cn(
        "btn",
        size && BTN_SIZES[size],
        status && BTN_STATUS[status],
        variant && BTN_VARIANTS[variant],
        shape && BTN_SHAPES[shape],
        active && "btn-active",
        block && "btn-block",
        wide && "btn-wide",
        disabled && "btn-disabled",
        className,
      )}
      {...p}
    />
  );
}
